<template>
	<h4>商品管理</h4>
	<MyTable :goodsList="goodsList">
		<template #header>
			<th scope="col">序号</th>
			<th scope="col">名称</th>
			<th scope="col">价格</th>
			<th scope="col">标签</th>
			<th scope="col">操作</th>
		</template>
		<template #body='{row,index}'>
			<td>{{row.id}}</td>
			<td>{{row.goods_name}}</td>
			<td>{{row.goods_price}}</td>
			<td>{{row.tags}}</td>
			<td>
				<button type="button" class="btn btn-outline-danger btn-sm">删除</button>
			</td>
		</template>
	</MyTable>
</template>

<script setup>
	import MyTable from './components/MyTable.vue';
	import {
		ref
	} from 'vue';

	//定义商品数据
	const goodsList = ref([{
			id: 1,
			goods_name: '夏季专柜同款女鞋3',
			goods_price: 289,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 2,
			goods_name: '夏季专柜同款女鞋2',
			goods_price: 289,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		},
		{
			id: 2,
			goods_name: '夏季专柜同款女鞋3',
			goods_price: 28,
			tags: ['舒适', '透气'],
			inputVisible: false,
			inputValue: ''
		}
	])
</script>

<style scoped>
  
</style>